<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="../css/element-ui-index.css" />
  </head>

  <body>
    <div class="app">
      <h1>{{msg}}</h1>

      <p>{{msg1}}</p>

      <p v-html="Vhtml"></p>

      <!-- :是v-bind的简写v-bind使得DOM元素的属性在VUE中得以动态化 -->
      <div :class="{Vbind:colorC}">
        <h2>这是一个使用vbind的方框</h2>
        <input type="checkbox" v-model="colorC" />
        <!-- @是v-on 的简写v-on绑定了鼠标点击事件使得Dom元素得以操作 -->
        <el-button @click="CColor">点击改变方框颜色</el-button>
      </div>

      <p>{{5+10*2}} {{say}}</p>

      <el-button @click="_btnopen">显示一段文字 </el-button>
      <p v-show="btnopen">一个显示消失的文字v-show元素显示隐藏</p>
      <!-- <el-dialog :visible.sync="btnopen"> </el-dialog> -->
    </div>
  </body>

  <script src="../js/vue.js"></script>
  <script src="../js/element-ui-lib-index.js"></script>

  <script>
    new Vue({
      el: ".app",
      data: {
        msg: "Hello Vue.js",
        msg1: "这是一个单纯的文本插值语法",
        Vhtml:
          "<button>这是一个button使用v-html加入Dom <br><el-button>在插值语法中不能使用UI框架</button>",
        colorC: false,
        say: "vue过滤器可以串联，并且支持js",
        btnopen: false,
      },
      methods: {
        CColor() {
          this.colorC = !this.colorC;
          console.log(typeof "meg");
        },
        _btnopen() {
          this.btnopen = !this.btnopen;
        },
      },
    });
  </script>
  <style>
    .app {
      width: 80vh;
      height: 80vh;
      margin: 30px auto auto auto;
    }
    .Vbind {
      width: 200px;
      height: 200px;
      background-color: black;
      color: rgb(22, 119, 103);
    }
  </style>
</html>
